<script setup>
import { ref, watch,shallowRef } from 'vue';
import { SearchWallpaper } from '../../api';
import {onReachBottom,onPullDownRefresh}from'@dcloudio/uni-app'
import typeItemVue from '../../components/typeItem/typeItem.vue';
const typeItem = shallowRef(typeItemVue)
const str = ref('')	
const n = ref(1)
const list =ref([])
const back = () => {
		uni.navigateBack()
	}
const cancel = () => {
	str.value=''
	n.value++
}
const search = async()=>{
	if(str.value === '') return
 const res= await	SearchWallpaper({str:str.value,n:n.value})
 list.value = res.data
 console.log(res.data)
}
watch(str,(newv) => {
	if(newv === '') {
	n.value = 1
	list.value = []
	}
	})
onReachBottom(async()=>{
	  n.value++
	 const res= await	SearchWallpaper({str:str.value,n:n.value})
	 list.value= [...list.value,...res.data]
})
onPullDownRefresh( async()=>{
	n.value=1
	list.value= []
	const res= await	SearchWallpaper({str:str.value,n:n.value})
	list.value =res.data
})
</script>
<template>
	<view class="bar">
		<view style="height: 23px;width: 750rpx;background-color: white;"></view>
		<uni-nav-bar @clickLeft="back" left-icon="back"   title="搜索" />
	</view>
	<view class="main" >
		<uni-search-bar @blur="search" :focus="true" v-model="str" 
						@cancel="cancel"></uni-search-bar>
		<view class="list">
			<typeItem v-for="(item,index) in list" :key="item._id"
			:info="item" :index="-1" :current="index" :list="list"
			></typeItem>
		</view>
	</view>
</template>

<style lang="scss" scoped>
	.bar {
		 position: fixed;
		 top: 0px;
		z-index: 999;
		width: 750rpx;
	}
	.list {
		width: 750rpx;
		padding: 10rpx;
		display: grid;
		grid-template-columns: 1fr 1fr 1fr;
	}
    .main {
		margin-top: 70px;
	}
</style>
